<template>
	<div>
		<header>
			<section>
				<label for="title">ToDoList</label>
				<input type="text" id="title" name="title" placeholder="添加ToDo" v-model="inputValue" required="required"
					autocomplete="off" />
				<button style="margin-left: 80px;margin-top: 15px;" @click="add">添加</button>
			</section>
		</header>
		<section>
			<h2>正在进行 <span id="todocount">{{unDoneList.length}}</span></h2>
			<ol id="todolist" class="demo-box">
				<li v-for="(item,index) in unDoneList" :key="item.title">
					<input type="checkbox" v-model="item.done">
					<p>{{item.title}}</p>
					<a href="#" @click.prevent="remove(item.title)"></a>
				</li>
			</ol>
			<h2>已经完成 <span id="donecount">{{doneList.length}}</span></h2>
			<ul id="donelist">
				<li v-for="(item,index) in doneList" :key="item.title">
					<input type="checkbox" v-model="item.done">
					<p>{{item.title}}</p>
					<a href=""  @click.prevent="remove(item.title)"></a>
				</li>
			</ul>
		</section>
		<footer>
			Copyright &copy; 2014 todolist.cn
		</footer>

	</div>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				inputValue: '',
				title:''
			}
		},
		mounted() {
			this.getTodoList()
		},
		methods: {
			...mapActions(['getTodoList']),
			add() {
				//触发mutations中的方法实现count的加1操作
				this.$store.commit('addTodoList', this.inputValue)
				this.inputValue = ''
			},
			remove(title) {
				console.log(title)
				this.$store.commit('deleteTodoList',title)
			},

		},
		computed: {
			...mapState(['todoList']),
			//获取已完成列表和未完成列表
			...mapGetters(['doneList', 'unDoneList'])
		}
	}
</script>

<style scoped>
	body {
		margin: 0;
		padding: 0;
		font-size: 16px;
		background: #CDCDCD;
	}

	header {
		height: 50px;
		background: #333;
		background: rgba(47, 47, 47, 0.98);
	}

	section {
		margin: 0 auto;
	}

	label {
		float: left;
		width: 100px;
		line-height: 50px;
		color: #DDD;
		font-size: 24px;
		cursor: pointer;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	header input {
		float: right;
		width: 60%;
		height: 24px;
		margin-top: 12px;
		text-indent: 10px;
		border-radius: 5px;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
		border: none
	}

	input:focus {
		outline-width: 0
	}

	h2 {
		position: relative;
	}

	span {
		position: absolute;
		top: 2px;
		right: 5px;
		display: inline-block;
		padding: 0 5px;
		height: 20px;
		border-radius: 20px;
		background: #E6E6FA;
		line-height: 22px;
		text-align: center;
		color: #666;
		font-size: 14px;
	}

	ol,
	ul {
		padding: 0;
		list-style: none;
	}

	li input {
		position: absolute;
		top: 2px;
		left: 10px;
		width: 22px;
		height: 22px;
		cursor: pointer;
	}

	p {
		margin: 0;
	}

	li p input {
		top: 3px;
		left: 40px;
		width: 70%;
		height: 20px;
		line-height: 14px;
		text-indent: 5px;
		font-size: 14px;
	}

	li {
		height: 32px;
		line-height: 32px;
		background: #fff;
		position: relative;
		margin-bottom: 10px;
		padding: 0 45px;
		border-radius: 3px;
		border-left: 5px solid #629A9C;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	}

	ol li {
		cursor: move;
	}

	ul li {
		border-left: 5px solid #999;
		opacity: 0.5;
	}

	li a {
		position: absolute;
		top: 2px;
		right: 5px;
		display: inline-block;
		width: 14px;
		height: 12px;
		border-radius: 14px;
		border: 6px double #FFF;
		background: #CCC;
		line-height: 14px;
		text-align: center;
		color: #FFF;
		font-weight: bold;
		font-size: 14px;
		cursor: pointer;
	}

	footer {
		color: #666;
		font-size: 14px;
		text-align: center;
	}

	footer a {
		color: #666;
		text-decoration: none;
		color: #999;
	}

	@media screen and (max-device-width: 620px) {
		section {
			width: 96%;
			padding: 0 2%;
		}
	}

	@media screen and (min-width: 620px) {
		section {
			width: 600px;
			padding: 0 10px;
		}
	}
</style>